<template>
  <div id="centreBottom1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">

        <div class="d-flex">
          <span class="fs-xl text mx-2" >人工事件清单</span>
        </div>
      </div>
      <div class="d-flex jc-center body-box">
        <dv-scroll-board :config="config"  class="scroll-board" />
      </div>
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
export default {
  name: 'Event',
  props: {
    selectEvenits: {
      type: Array,
      default: () => Array
    }
  },
  data () {
    return {
      config: {
        header: ['时间', '公路位置', '事件描述'],
        data: [
        /*   ['2020-7-1 10:00:00', '武汉', '拥堵'],
          ['2020-7-2 10:00:00', '武汉', '拥堵'],
          ['2020-7-3 10:00:00', '武汉', '拥堵'],
          ['2020-7-4 10:00:00', '武汉', '拥堵'],
          ['2020-7-4 10:00:00', '武汉', '拥堵'],
          ['2020-7-4 10:00:00', '武汉', '拥堵'],
          ['2020-7-4 10:00:00', '武汉', '拥堵'] */

        ],
        rowNum: 4, // 表格行数
        headerHeight: 35,
        headerBGC: '#9D304E4C', // 表头
        oddRowBGC: '#562F704C', // 奇数行
        evenRowBGC: '#6C45894C', // 偶数行
        columnWidth: [190, 220, 150],
        align: ['center']
      },
      eventList: [
        { id: 1, name: '事故' },
        { id: 2, name: '路障 ' },
        { id: 3, name: '维护 ' },
        { id: 4, name: '其他' }
      ]

    }
  },
  created () {
    this.initData()
  },
  watch: {
    selectEvenits (newV, oldV) {
      if (newV === null) {
        return
      }
      var result = []
      for (var i = 0; i < newV.length; i++) {
        var temp = []
        temp.push(parseTime(newV[i].eventTime))
        // temp.push(newV[i].startStation)
        temp.push(newV[i].name)
        // temp.push(newV[i].speed)
        // temp.push(this.getEventTypeName(newV[i].eventionType))
        temp.push(newV[i].eventDesc)
        result.push(temp)
      }
      // console.log(result)
      this.initData()
      // console.log(this.config.data)
    }
  },
  methods: {
    initData () {
      if (this.selectEvenits === null) {
        return
      }
      var result = []
      for (var i = 0; i < this.selectEvenits.length; i++) {
        var temp = []
        temp.push(parseTime(this.selectEvenits[i].eventTime))
        temp.push(this.selectEvenits[i].name)
        //  temp.push(this.selectEvenits[i].endStation)
        // temp.push(this.selectEvenits[i].speed)
        // temp.push(this.getEventTypeName(this.selectEvenits[i].eventionType))
        temp.push(this.selectEvenits[i].eventDesc)
        result.push(temp)
      }
      // console.log(result)
      this.config = {
        header: ['时间', '公路位置', '事件描述'],
        data: result,
        rowNum: 5, // 表格行数
        headerHeight: 35,
        headerBGC: 'transparent', // 表头
        oddRowBGC: '#28293f4C', // 奇数行
        evenRowBGC: 'transparent', // 偶数行
        columnWidth: [200, 220, 150],
        align: ['center']
      }
    },
    getEventTypeName (id) {
      let typeName = ''
      if (id == null || id === '' || !this.eventList) return typeName
      this.eventList.some(function (item) {
        if (item.id === id) {
          typeName = item.name
          return true
        }
      })
      return typeName
    }
  }
}
</script>

<style lang="less">
#centreBottom1 {
  height: 100%;
  min-width: 100%;
  border-radius:5px;
 .bg-color-black {
    height: 100%;
    border-radius: 2px;
  }
  .text {
    color: white;
    font-size: 15px;
    margin-left: 10px;
    font-weight: 'bolder',

  }
  .body-box {
    border-radius:2px;
    overflow: hidden;
  }
 .dv-scroll-board .header {
    font-size: 20px;
    font-weight: 'bolder';
  }

  .scroll-board{
    width: 100%;
    height: 235px;
  }
}

</style>
